<template>
    <div class="step">
        <div class="step-item" v-for="(item,index) in status" :key="item.id">
            <div class="step-item-line"
                 :class="index < status.length - 1&&'line line-'+type">
                <span class="active" :class="'active-'+type"  v-if="active === item.id&&status.length > 1">
                    <van-icon name="cross" v-if="type=='error'"/>
                    <van-icon name="success" v-else />
                </span>

                <i class="inactive" :class="'inactive-'+type" v-else-if="status.length > 1"/>
            </div>
            <div class="step-item-cell" :class="{'margin': index < status.length - 1}">
                <p>{{item.name}}</p>
                <span>{{item.date}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "steps",
        props: {
            active: {
                type: Number,
                default: 0
            },
            type: {
                type: String,
                default: 'error'
            },
            status: {
                type: Array,
                default(){  //'-2': '已退件', '-1': '审核拒绝', 0: '待受理', 1: '已受理', 2: '审批中', 3: '审批成功', 4: '已放款'
                    return[
                        {
                            id: 4,
                            name: '已放款',
                            date: '2020.6.12 12:00:34'
                        },
                        {
                            id: 3,
                            name: '审批成功',
                            date: '2020.6.12 12:00:34'
                        },
                        {
                            id: 2,
                            name: '审批中',
                            date: '2020.6.12 12:00:34'
                        },
                        {
                            id: 1,
                            name: '审核通过',
                            date: '2020.6.12 12:00:34'
                        },
                        {
                            id: 0,
                            name: '审核中',
                            date: '2020.6.12 12:00:34'
                        },
                        {
                            id: -1,
                            name: '审核拒绝',
                            date: '2020.6.12 12:00:34'
                        },
                        {
                            id: -2,
                            name: '已退件',
                            date: '2020.6.12 12:00:34'
                        },
                    ]
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .step {
        &-item {
            display: flex;

            &-line {
                width: 40px;
                padding-top: 5px;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                position: relative;

                &.line:after {
                    content: '';
                    position: absolute;
                    top: 10px;
                    left: 50%;
                    bottom: -5px;
                    width: 1px;
                    z-index: 1;
                    transform: translateX(-50%);
                }
                &.line-error:after{
                    background-color: #E02020;
                }
                &.line-success:after{
                    background-color: @theme-color;
                }

                .active, .inactive {
                    position: relative;
                    z-index: 2;
                }

                .active {
                    width: 18px;
                    height: 18px;
                    border-radius: 9px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    i{
                        color: #fff;
                        font-weight: bold;
                        font-size: @small;
                    }
                    &.active-success{
                        background-color: @theme-color;
                    }
                    &.active-error{
                        background-color: #E02020;
                    }
                }

                .inactive {
                    display: block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    &.inactive-success{
                        background-color: @theme-color;
                    }
                    &.inactive-error{
                        background-color: #E02020;
                    }
                }
            }

            &-cell {
                margin-left: 10px;

                &.margin {
                    margin-bottom: 20px;
                }

                p {
                    font-size: @larger;
                    color: #3F3F3F;
                    font-weight: 400;
                }

                span {
                    font-size: @md;
                    color: #999;
                }
            }
        }
    }
</style>
